<template>
	<view class="home">
		<u-navbar :isBack="false" :border-bottom="false" :background="{ backgroundColor: '#0993EC' }" title-color="#fff" title="元"></u-navbar>
		
		<view class="menu-icon" @click="showDrawer">
			<u-icon name="list" size="40" color="#fff"></u-icon>
		</view>
		<view class="first-part">
			<!-- <u-dropdown>
				<u-dropdown-item v-model="searchType" :title="options[searchType-1].label" :options="options"></u-dropdown-item>
			</u-dropdown> -->
			<u-search :clearabled="true" placeholder="前端知识" v-model="keyword" :show-action="false" @search="search"></u-search>
		</view>
		
		<view class="second-part">
			<view class="func" v-for="(item, i) in funcList" :key="item.index">
				<text>{{ item.label }}</text>
			</view>
		</view>
		
		<view class="third-part">
			<view class="kld" v-for="(item, i) in kldList" :key="item.index">
				<image class="img" :src="item.imgUrl" mode="scaleToFill"></image>
				<text>{{ item.sortName }}</text>
			</view>
		</view>
		
		<view class="fourth-part">
			<view class="content" v-for="(item, i) in knowList" :key="i">
				<!-- <image class="left-img" src="../../static/img/list1.png" mode="widthFix"></image> -->
				<view class="right-content">
					<view class="title">
						{{ item.name }}
					</view>
					<view class="des">
						<text class="site">B站网址：</text>
						<text>{{ item.techSite }}</text>
					</view>
					<view class="des">
						<text class="site">技术网址：</text>
						<text>{{ item.bsite }}</text>
					</view>
					<view class="time">
						<text>{{ item.writer }}</text>
						<text>{{ item.createTime | formateTime }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup v-model="isPopDrawer" mode="left" width="50%">
			<view>
				侧边栏
			</view>
		</u-popup>
		
		<!-- tab -->
		<tab :url="url" index="1"></tab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: {
					homeURL: '/pages/home/home',
					kldURL: '/pages/kld/kld',
					myURL: '/pages/user/user'
				},
				keyword: '', // 搜索关键词
				searchType: 1,
				isPopDrawer: false, // 是否展示抽屉
				options: [{
						label: '作者',
						value: 1,
					},
					{
						label: '分类',
						value: 2,
					},
					{
						label: '等级',
						value: 3,
					}
				],
				funcList: [
					{
						img: '',
						label: '基础知识',
						index: 0
					},
					{
						img: '',
						label: '技术难点',
						index: 1
					},
					{
						img: '',
						label: '常见误区',
						index: 2
					},
					{
						img: '',
						label: '其他知识',
						index: 3
					}
				],
				kldList: [],
				knowList: [], // 知识列表
				knowTotal: 0, // 知识列表总数
			};
		},
		onLoad() {
			this.getKonwList();
			this.getSortList();
		},
		filters: {
			formateTime(time){
				if(!time) return ""
				return time.split(' ')[0]
			}
		},
		methods: {
			getSortList(){
				this.$u.api.getSortList().then(data => {
					if(data.code === 200){
						console.log(data, "返回分类列表数据");
						this.kldList = data.data.data;
					}
				})
			},
			showDrawer(){
				this.isPopDrawer = true;
			},
			search(){
				console.log(this.keyword, "search");
			},
			getKonwList(){
				this.$u.api.getInfoList().then(data => {
					if(data.code === 200){
						console.log(data, "返回列表数据");
						this.knowList = data.data.data;
						this.knowTotal = data.data.total;
					}else {
						this.$u.toast(data.msg);
						setTimeout(() => {
							this.$Router.replace("/pages/login/login");
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	.first-part {
		// display: flex;
		// justify-content: space-evenly;
		margin: 20upx 0;
	}
	/deep/.u-dropdown__content__mask{
		background: none;
	}
	/deep/.u-dropdown {
		flex: none;
		width: 200upx;
		border: 2upx solid #ccc;
		border-radius: 40upx;
		margin: 10upx;
	}
	/deep/.u-content {
		border: 2upx solid #ccc;
	}
	
	.second-part {
		border: 1px solid #ccc;
		border-radius: 20upx;
		background-color: #fff;
		box-shadow: 0 0 10upx #ccc;
		width: 80%;
		margin: 0 auto;
		display: flex;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		.func {
			width: 120upx;
			height: 120upx;
			margin: 40upx 80upx;
			text-align: center;
			padding: 20upx;
			border: 1px solid #FF753C;
			border-radius: 20upx;
		}
	}
		
	.third-part {
		background-color: #fff;
		display: flex;
		justify-content: space-evenly;
		padding: 10upx 40upx;
		margin-top: 40upx;
		.kld {
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			.img {
				width: 80upx;
				height: 60upx;
				margin: 10upx 0;
			}
		}
	}
	
	.fourth-part {
		width: 100%;
		padding-bottom: 120upx;
		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			margin: 20upx 0;
			padding: 0 40upx;
			.left-img {
				width: 360upx;
				margin-right: 30upx;
			}
			.right-content {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding: 20upx 0;
				.title {
					font-weight: bold;
					font-size: 32upx;
				}
				.des {
					font-size: 24upx;
					margin: 8upx 0;
					display: flex;
					flex-direction: column;
					.site {
						font-weight: bold;
						font-size: 28upx;
					}
				}
				.time {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
	
	.menu-icon {
		position: fixed;
		top: 24upx;
		left: 20upx;
		z-index: 999;
	}
</style>
